<template>
  <div class="sign-form-item">
    <div class="header-title">
      <div class="title"><div class="dot"/>合同信息</div>
      <PlainCreateBtn v-if="showAssociateBtn" size="small" @click="relatedContractShow">关联合同</PlainCreateBtn>
    </div>
    <el-table
      :data="contractList"
      class="fb-table"
      element-loading-text="加载中..."
      fit>
      <EmptyPlaceholder slot="empty" is-border mode="table" style="padding-bottom: 0;" />
      <el-table-column align="left" label="项目名称" min-width="150">
        <template slot-scope="scope">
          <el-tooltip :open-delay="800" placement="top-start" effect="dark">
            <div slot="content" style="max-width: 200px;">{{ scope.row.contractName || '--' }}</div>
            <div class="ellipsisOne" style="cursor:pointer;color:#406eff;" @click="toDetail(scope.row)">{{ scope.row.contractName || '--' }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="left" label="合同编号" min-width="130">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.contractCode" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="合同类型" min-width="130">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.contractType | setLegalTypeState " />
        </template>
      </el-table-column>
      <el-table-column align="left" label="合同有效期" width="210">
        <template slot-scope="scope">
          <el-tooltip :open-delay="800" placement="top" effect="dark">
            <div slot="content" style="max-width: 220px; white-space: nowrap; padding: 0 10px;">
              <span v-if="scope.row.contractDate === 1 || scope.row.contractDate == null">{{ scope.row.contractEffectStartDate/1000 | standardFormatNoHour('YYYY/MM/DD', '--') }} - {{ scope.row.contractEffectEndDate/1000 | standardFormatNoHour('YYYY/MM/DD', '--') }}</span>
              <span v-else>{{ scope.row.pushTime/1000 | standardFormatNoHour('YYYY/MM/DD', '--') }}</span>
            </div>
            <div class="line-clamp1">
              <span v-if="scope.row.contractDate === 1 || scope.row.contractDate == null">{{ scope.row.contractEffectStartDate/1000 | standardFormatNoHour('YYYY/MM/DD', '--') }} - {{ scope.row.contractEffectEndDate/1000 | standardFormatNoHour('YYYY/MM/DD', '--') }}</span>
              <span v-else>{{ scope.row.pushTime/1000 | standardFormatNoHour('YYYY/MM/DD', '--') }}</span>
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="left" label="申请人" min-width="100">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.proposer" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="距离到期日" min-width="120">
        <template slot-scope="scope">
          <div v-if="scope.row.isExpired" style="color: #FF4E5F">已到期</div>
          <div v-else-if="scope.row.expiredDuration || scope.row.expiredDuration === 0">
            <span :style="expiredTypeClass(scope.row.expiredDuration)">
              {{ scope.row.expiredDuration !== 9999 ? scope.row.expiredDuration : '--' }}
            </span> 天
          </div>
          <span v-else>-- 天</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="申请人部门" min-width="120">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.department" :open-delay="800" placement="top" effect="dark">
            <div slot="content" style="max-width: 200px;">{{ scope.row.department || '--' }}</div>
            <div class="ellipsisOne">{{ scope.row.department || '--' }}</div>
          </el-tooltip>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column v-if="showOperate" align="left" label="操作">
        <template slot-scope="scope">
          <span style="color: red; cursor: pointer" @click="handleContractDelete">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 关联合同 -->
    <relatedContract
      ref="showRelatedContract"
      :multiple="false"
      :visible.sync="showRelatedContract"
      exclude-cancel
      @confirmRelatedContract="confirmRelatedContract"
    />
  </div>
</template>

<script>
import EmptyPlaceholder from '@/components/Common/emptyPlaceholder';
import relatedContract from '@/components/CreateOrder/relatedContract';
import { expiredTypeClass } from '@/views/signUp/components/status';
import { encryption } from '@/utils';
import { CONTRACT_TYPE } from '@/utils/const/contract';
import { setLegalTypeState } from '@/filters/status';
import { standardFormatNoHour } from '@/filters/date';
export default {
  filters: {
    standardFormatNoHour,
    setLegalTypeState
  },
  components: {
    EmptyPlaceholder,
    relatedContract
  },
  model: {
    prop: 'contractList',
    event: 'changeValue'
  },
  props: {
    contractList: {
      type: Array,
      default: () => []
    },
    showOperate: {
      type: Boolean,
      default: true
    },
    /**
      新建 / 详情开启关联合同事件 显示
     */
    showAssociateBtn: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showRelatedContract: false
    };
  },
  computed: {},
  watch: {},
  methods: {
    expiredTypeClass,
    // 跳转合同详情
    toDetail(row) {
      const routeUrl = this.$router.resolve({
        name: 'contractDetail',
        params: { id: encryption(row.id) },
        query: {
          processId: encryption(row.processId)
        }
      });
      window.open(routeUrl.href, '_blank');
    },
    handleContractDelete() {
      this.contractList.pop();
      this.$emit('changeValue', this.contractList);
    },
    // 选择合同
    relatedContractShow() {
      this.showRelatedContract = true;
      let data = null;
      if (Array.isArray(this.contractList) && this.contractList.length) {
        data = this.contractList[0];
      }
      this.$refs['showRelatedContract'].filterInput = { contractType: CONTRACT_TYPE.KOL };
      this.$refs['showRelatedContract'].init(data);
    },
    confirmRelatedContract(data) {
      this.$emit('onContractSelect', data);
      this.showRelatedContract = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.header-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.title {
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  color: #333333;
  line-height: 16px;
  display: flex;
  align-items: center;
  // margin:16px 0 10px 14px;
  // margin-top: 16px;
  .dot {
    width: 4px;
    height: 4px;
    background-color: #406EFF;
    margin-right: 6px;
  }
}
</style>
